<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-05-15 16:54:44
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-16 16:09:57
 * @FilePath: /XMate-h5/src/views/minutes/components/transfer/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col flex-auto bg-white">
    <div class="flex flex-col flex-auto px-4 pt-2">
      <Header
        v-model="searchText"
        :matchCount="matchCount"
        :matchIndex="matchIndex"
        @jumpPrev="jumpPrev"
        @jumpNext="jumpNext"
      />
      <AsrList
        ref="asrListRef"
        :searchValue="searchText"
        @onClickKeyword="handleClickKeyword"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "./header.vue";
import AsrList from "./asrList.vue";
import { ref, computed, watch, nextTick } from "vue";
import { findIndexOfStr } from "@/utils/utils";
import { SearchIndexModel } from "@/types/minutes/store.type";
import { useMinutesStore } from "@/store/modules/minutes/minutes";

const minutesStore = useMinutesStore();

const searchText = ref("");
const asrListRef = ref();

// 匹配项索引数组
const matchIndexes = computed(() => {
  if (!searchText.value) return [];
  const list = asrListRef.value?.listData || [];
  const keyword = searchText.value.trim();
  if (!keyword) return [];

  let result: SearchIndexModel[] = [];
  console.log("list: ", list);
  for (let index = 0; index < list.length; index++) {
    const asrItem = list[index];

    const { TextPolish, txt } = asrItem;
    let indexes = findIndexOfStr(keyword, TextPolish);
    if (indexes.length > 0) {
      for (const indexItem of indexes) {
        result.push({
          indexOfItem: index,
          indexOfLine: indexItem,
          type: "txt",
          item: asrItem,
        });
      }
    }
    let indexes2 = findIndexOfStr(keyword, txt);
    if (indexes2.length > 0) {
      for (const indexItem of indexes2) {
        result.push({
          indexOfItem: index,
          indexOfLine: indexItem,
          type: "txt",
          item: asrItem,
        });
      }
    }
  }
  console.log("list result: ", result);
  return result;
});

const matchCount = computed(() => matchIndexes.value.length);
const matchIndex = ref(0);

// 切换到上一个匹配项
function jumpPrev() {
  if (matchCount.value === 0) return;
  matchIndex.value = (matchIndex.value - 1 + matchCount.value) % matchCount.value;
  jumpToCurrent();
}
// 切换到下一个匹配项
function jumpNext() {
  if (matchCount.value === 0) return;
  matchIndex.value = (matchIndex.value + 1) % matchCount.value;
  jumpToCurrent();
}
// 跳转到当前高亮cell
function jumpToCurrent() {
  nextTick(() => {
    const idx = matchIndexes.value[matchIndex.value];
    if (idx) {
      asrListRef.value.scrollToItem(idx.item);
      minutesStore.searchInfo = idx;
    }
  });
}

function handleClickKeyword(keyword: string) {
  searchText.value = keyword;
  jumpToCurrent();
}

// 搜索内容变化时，自动跳到第一个匹配项
watch(searchText, () => {
  matchIndex.value = 0;
  jumpToCurrent();
});
</script>

<style scoped lang="less"></style>
